{!capture name='main'!}
<h1>{!if $typeId==0!}上传{!else!}编辑{!/if!}做过的“{!$food.name!}”</h1>
<br/>
{!/capture!}
{!capture name='left'!}
<form action="/action/food/{!if $typeId==0!}add{!else!}edit{!/if!}" method="post" enctype="multipart/form-data" onsubmit="return onSubmit(this);">
<input type="hidden" name="recipeId" value="{!$food.recipeId!}"/>
<input type="hidden" name="foodId" value="{!$food.foodId!}"/>
<table cellspacing="0" cellpadding="4" border="0" width="100%">
	<tr>
		<td width="40" class="r">名称：</td>
		<td><input type="text" name="foodName" style="width:200px;" value="{!$food.name!}"/></td>
	</tr>
	<tr>
		<td class="r">图片：</td>
		<td>{!if $typeId==1!}<img src="/static/picture/food/{!$food.foodId!}_small"/>{!/if!}<input type="file" name="picture" size="40"/></td>
	</tr>
	<tr>
		<td valign="top" class="r">描述：</td>
		<td><textarea name="description" style="width:400px;height:140px">{!$food.description!}</textarea>300字以内</td>
	</tr>
	<tr>
		<td class="r">标签：</td>
		<td><input type="text" name="tags" id="tags" style="width:300px;" maxlength="40" value="{!$food.tags!}"/><span class="g">可选</a></td>
	</tr>
	<tr>
		<td></td>
		<td>
			<p>我的标签：{!foreach from=$myTags item=tag!}
<a href="javascript:void(0);" class="tag">{!$tag.name!}</a>&nbsp;&nbsp;&nbsp;
{!/foreach!}</p>
			<p>大家常用的标签：{!foreach from=$allTags item=tag!}
<a href="javascript:void(0);" class="tag">{!$tag.name!}</a>&nbsp;&nbsp;&nbsp;
{!/foreach!}</p>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>
			<input type="submit" value="确定"/>
			<input type="reset" value="取消"/>
		</td>
	</tr>
</table>
</form>
{!/capture!}
{!capture name='jsCode'!}
<script type="text/javascript">
function onSubmit(form) {
	if (!$.trim(form.foodName.value)) {
		alert("名称不能为空");
		form.foodName.focus();
		return false;
	}
	var desc = $.trim(form.description.value);
	var len = desc.replace(/[\u4e00-\u9fa5]/g,'aa').length;
	if (len < 40 || len >600) {
		alert('简介长度必须在20至300字之间');
		form.description.focus();
		return false;
	}
	return true;
}

var el = $('#tags');
$('.tag').click(function(){
	if (inTags(this.innerHTML)) {
		removeTag(this.innerHTML);
		$(this).removeClass('disabled');
	} else {
		appendTag(this.innerHTML);
		$(this).addClass('disabled');
	}
});	
el.keyup(checkTag);
checkTag();
function checkTag(event){
	var tags = getTags();
	$('.tag').each(function(){
		if ($.inArray(this.innerHTML,tags) > -1) $(this).addClass('disabled');
		else $(this).removeClass('disabled');
	});
}
function removeTag(tag){
	var reg = new RegExp('(^|[ ]+)' + tag + '([ ]+|$)')
	el.val(el.val().replace(reg,' '));
}
function appendTag(tag) {
	if (!$.trim(el.val())) el.val(tag);
	else el.val(el.val() + ' ' + tag);
}
function getTags() {
	var v = $.trim(el.val());
	if (!v) return [];
	return v.split(/[, ]+/);
}
function inTags(tag) {
	return $.inArray(tag,getTags()) > -1;
}
</script>
{!/capture!}

{!include file='layouts/default.tpl'!}